{extend name="layout/layout" /}


{block name="style"}
    <link href="/assets/mobile/css/mui.picker.css" rel="stylesheet" />
    <link href="/assets/mobile/css/mui.poppicker.css" rel="stylesheet" />
	<style>
		.mui-btn{
			border-radius: 0;
		}

		input{
			font-size: 12px;
		}

		#area{
			margin-right: 20px;
		}
	</style>
{/block}

{block name="main"}
	<div class="add-address" v-cloak>
		<form class="mui-input-group">
		    <div class="mui-input-row">
		    	<input type="text" v-model="recipients" class="mui-input-clear" placeholder="收件人姓名">
		    </div>
		    <div class="mui-input-row">
		    	<input type="text" v-model="mobile" class="mui-input-clear" placeholder="手机号码">
		    </div>
		    <ul class="mui-table-view">
			    <li class="mui-table-view-cell">
			        <a class="mui-navigate-right" id='showCityPicker3'>
				        省、市、区
				        <span class="mui-pull-right" id="area">{{areaname}}</span>
				    </a>
			    </li>
			</ul>
		    <div class="mui-input-row">
		    	<input type="text" v-model="address" class="mui-input-clear" placeholder="详细地址">
		    </div>

	        <button type="button" class="mui-btn mui-btn-theme mui-btn-block" @tap="add()">保存</button>
		</form>
	</div>
{/block}

{block name="navbar"}{/block}

{block name="script"}
	<script src="/assets/mobile/js/mui.picker.js"></script>
    <script src="/assets/mobile/js/mui.poppicker.js"></script>
    <script src="/assets/mobile/js/city.data-3.js" type="text/javascript" charset="utf-8"></script>
	<script>
		 mui.init();
            
        (function($, doc) {
            $.ready(function() {
                //普通示例

                //-----------------------------------------
                //                  //级联示例
                var cityPicker3 = new $.PopPicker({
                    layer: 3
                });
                cityPicker3.setData(cityData3);
                var showCityPickerButton = doc.getElementById('showCityPicker3');
                var area = doc.getElementById('area');
                var location = doc.getElementById('location_id');
                showCityPickerButton.addEventListener('tap', function(event) {
                    cityPicker3.show(function(items) {
                        addressVue.areaname = (items[0] || {}).text + " " + (items[1] || {}).text + " " + (items[2] || {}).text;
                        //返回 false 可以阻止选择框的关闭
                        addressVue.province_id = (items[0] || {}).value;
                        addressVue.city_id = (items[1] || {}).value;
                        addressVue.area_id = (items[2] || {}).value;
                        //return false;
                    });
                }, false);
            });
        })(mui, document);

		var addressVue = new Vue({
			el:'.add-address',
			data: {
				id:'{$data.id?:""}',
				recipients:'{$data.recipients?:""}',
				mobile: '{$data.mobile?:""}',
				address: '{$data.address?:""}',
				province_id: '{$data.province_id?:""}',
				city_id: '{$data.city_id?:""}',
				area_id: '{$data.area_id?:""}',
				areaname: '{$data.province?:""}'+'{$data.city?:""}'+'{$data.area?:""}'
			},
			methods: {
				add: function(){

					if(!this.recipients){
						mui.toast('收件人姓名不能为空');return;
					}

					if(!this.mobile){
						mui.toast('手机号码不能为空');return;
					}

					var preg = /^1\d{10}$/;
					if(!preg.test(this.mobile)){
						mui.toast('手机号码格式不正确');return;
					}
					if(!this.area_id){
						mui.toast('请选择地区');return;
					}
					if(!this.address){
						mui.toast('详细地址不能为空');return;
					}


					var postData = {
						'token': token,
						id:this.id,
						recipients:this.recipients,
						mobile: this.mobile,
						address: this.address,
						province_id: this.province_id,
						city_id: this.city_id,
						area_id: this.area_id,
						is_default: false,
					}
					console.log(postData);


					var that = this;
					var url =  'address/editAddress';
					layer.open({
						type:2,
						shadeClose:false,
					});

					request(that, {'url': url, 'data':postData}, function(res){
						mui.toast(res.msg);
						if(res.code == 200) {
							mui.back();
						}	
						layer.closeAll();
					},function(error){
						layer.closeAll();
						mui.toast(error.body.msg);
					});
				}
			}
		});
	</script>
{/block}